<template>
  <div class="nav1">
    <div class="index">
      <div class="item">
        <img
          src="https://d.ifengimg.com/w320_h180/x0.ifengimg.com/ucms/2022_04/E0E6E067FA47D608B614FF9E985227349592CDDC_size84_w640_h360.jpg"
          alt=""
        />
        <div class="box">
          <div class="pic">5.7万</div>
          <div class="time">24.25</div>
        </div>
        <a href="#"><h3>专访伊朗奥委会主席:祝北京冬奥会圆满,杭州亚运会|完整版</h3></a>
        <div class="duihua">
          <div class="dh">风云对话</div>
          <div class="dh">2022-02-17 20:30:00</div>
        </div>
      </div>
      <div class="item">
        <img
          src="https://d.ifengimg.com/w320_h180/x0.ifengimg.com/ucms/2021_52/78CA23F79940E84DE1FFF03EFDA248733183BDD3_size437_w690_h388.png"
          alt=""
        />
        <div class="box">
          <div class="pic">2.7万</div>
          <div class="time">01:10</div>
        </div>
        <a href="#"><h3>雪脉·赛场内外的接力：追梦少年｜完整版</h3></a>
        <div class="duihua">
          <div class="dh">风云对话</div>
          <div class="dh">2022-02-17 20:30:00</div>
        </div>
      </div>
      <div class="item">
        <img
          src="https://d.ifengimg.com/w320_h180/x0.ifengimg.com/ucms/2021_52/78CA23F79940E84DE1FFF03EFDA248733183BDD3_size437_w690_h388.png"
          alt=""
        />
        <div class="box">
          <div class="pic">2.6万</div>
          <div class="time">24:51</div>
        </div>
        <a href="#"><h3>雪脉·赛场内外的接力：雪的女儿｜完整版</h3></a>
        <div class="duihua">
          <div class="dh">风云对话</div>
          <div class="dh">2022-02-17 20:30:00</div>
        </div>
      </div>

      <div class="item">
        <img
          src="https://d.ifengimg.com/w320_h180/x0.ifengimg.com/ucms/2021_52/78CA23F79940E84DE1FFF03EFDA248733183BDD3_size437_w690_h388.png"
          alt=""
        />
        <div class="box">
          <div class="pic">2.6万</div>
          <div class="time">24:51</div>
        </div>
        <a href="#"><h3>雪脉·赛场内外的接力:雪的女儿｜完整版</h3></a>
        <div class="duihua">
          <div class="dh">风云对话</div>
          <div class="dh">2022-02-17 20:30:00</div>
        </div>
      </div>

      <div class="item">
        <img
          src="https://d.ifengimg.com/w320_h180/x0.ifengimg.com/ucms/2021_52/78CA23F79940E84DE1FFF03EFDA248733183BDD3_size437_w690_h388.png"
          alt=""
        />
        <div class="box">
          <div class="pic">2.6万</div>
          <div class="time">24:51</div>
        </div>
        <a href="#"><h3>雪脉·赛场内外的接力：雪的女儿｜完整版</h3></a>
        <div class="duihua">
          <div class="dh">风云对话</div>
          <div class="dh">2022-02-17 20:30:00</div>
        </div>
      </div>

      <div class="item">
        <img
          src="https://d.ifengimg.com/w320_h180/x0.ifengimg.com/ucms/2021_52/78CA23F79940E84DE1FFF03EFDA248733183BDD3_size437_w690_h388.png"
          alt=""
        />
        <div class="box">
          <div class="pic">2.6万</div>
          <div class="time">24:51</div>
        </div>
        <a href="#"><h3>雪脉·赛场内外的接力：雪的女儿｜完整版</h3></a>
        <div class="duihua">
          <div class="dh">风云对话</div>
          <div class="dh">2022-02-17 20:30:00</div>
        </div>
      </div>
      <div class="box3">
        <img
          src="https://c1.ifengimg.com/iamsImg/2019/12/13/4ed5345f72e4242664572a4cba926efa_w1000_h90.jpg"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TwO",
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.nav1 {
  width: 1000px;
  margin: 0 auto;
  height: 179px;
  display: flex;
  justify-content: space-between;
}
.index {
  width: 1000px;
  height: 179px;
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 319px;
  height: 182px;
  background: blue;
  margin: 50px 5px;
}
.item img {
  width: 320px;
  height: 180px;
}
.box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.pic,
.time {
  color: aliceblue;
  margin-top: -31px;
}
h3 {
  font-size: 16px;
  line-height: 27px;
  margin-top: 14px;
  font-weight: 400;
}
a:hover {
  color: red;
  background: #000;
}
a {
  color: #000;
}
.index {
  width: 1000px;
  display: flex;
}
.duihua {
  display: flex;
  justify-content: space-between;
}
.box3 {
  width: 980px;
  height: 85px;
  background: blue;
  margin-top: 40px;
}
</style>
